<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <title>Hello, world!</title>
    <style>
        .my-ctl{
            margin:5px 5px 5px 0px;
        }
        .one,.two,.three{
            display:inline-block;
        }
    </style>
</head>
<body>


<div id="app">


    <form class="form-inline">

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">丢失人ID</div>
            </div>
            <input type="text" class="form-control" style="width:150px;"  v-model="query.lf_userid">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">丢失物品</div>
            </div>
            <input type="text" class="form-control" style="width:150px;" v-model="query.lf_name">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">物品种类</div>
            </div>
            <select class="custom-select" style="width:100px;" v-model="query.lf_kind" @change="goPage(1)">
                <option value="">全部</option>
                <option v-for="(label,value) in kindMap" :value="value">{{label}}</option>
            </select>
        </div>


        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">丢失日期</div>
            </div>
            <input type="date" class="form-control" style="width:200px;" v-model="query.lf_start_time">
            <div class="input-group-prepend input-group-append">
                <div class="input-group-text">至</div>
            </div>
            <input type="date" class="form-control" style="width:200px;" v-model="query.lf_end_time">
        </div>

        <!--
        <button type="button" class="btn btn-primary" @click="goPage(1)" >查询</button>
        <button class="btn btn-primary" @click="openAdd"><i class="fa fa-plus"></i> 新增丢失物品信息</button>
        <button type="button" class="btn btn-primary" @click="openPersonal"></i> 操作本查询</button>
        -->
    </form>
    <div>
        <div class="one" style="margin-left:200px;float: left">
            <button type="button" class="btn btn-primary" @click="goPage(1)" >查询</button>
        </div>
        <div class="one" style="margin-left:200px; float: left">
            <button class="btn btn-primary" @click="openAdd"><i class="fa fa-plus"></i> 新增丢失物品信息</button>
        </div>
        <div class="one" style="margin-right:400px; float: right">
            <button type="button" class="btn btn-primary" @click="openPersonal"></i> 操作本查询</button>
        </div>
    </div>


    <table class="table">
        <thead>
        <tr>
            <th>丢失人ID号</th>
            <th>丢失物品名称</th>
            <th>丢失物品种类</th>
            <th>丢失日期</th>
            <th>丢失物品描述</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in page.list" :key="item.lf_id">
            <td>{{item.lf_userid}}</td>
            <td>{{item.lf_name}}</td>
            <td>{{kindMap[item.lf_kind]}}</td>
            <td>{{item.lf_time}}</td>
            <td>{{item.lf_desc}}</td>
            <!--<td>
                <button type="button" class="btn btn-link"  @click="openUpd(item)" >修改</button>
                <button type="button" class="btn btn-link"  @click="execDel(item)" >删除</button>
            </td>-->
        </tr>
        </tbody>
    </table>

    <nav>
        <ul class="pagination" style="display: flex;align-items: center;">
            <li class="page-item" style="margin-right:10px;">

                <div class="input-group my-ctl">
                    <div class="input-group-prepend">
                        <div class="input-group-text">每页</div>
                    </div>
                    <select class="custom-select" style="width:70px;" v-model="query.pageSize" @change="goPage(1)">
                        <option v-for="pageSize in [2,3,5,10]" :value="pageSize">{{pageSize}}</option>
                    </select>
                    <div class="input-group-append">
                        <div class="input-group-text">条记录</div>
                    </div>
                </div>

            </li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.next)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.last)">尾页</a></li>

            <li class="page-item" style="margin-left:10px;">
                当前第 <input style="border:1px solid #EEEEEE;width:30px;text-align: center;margin:0px 3px;" type="text" v-model="query.pageNum" @blur="goPage(query.pageNum)" />页{{page.size}}条记录，共{{page.pages}}页条{{page.total}}记录。
            </li>
        </ul>
    </nav>


    <!-- 新增窗口 -->
    <div id="open-personal" style="display:none;padding:15px;">
        <form>
            <table class="table">
                <thead>
                <tr>
                    <th>丢失物品名称</th>
                    <th>丢失物品种类</th>
                    <th>丢失日期</th>
                    <th>丢失物品描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in page.list" :key="item.lf_id">
                    <td>{{item.lf_name}}</td>
                    <td>{{kindMap[item.lf_kind]}}</td>
                    <td>{{item.lf_time}}</td>
                    <td>{{item.lf_desc}}</td>
                    <td>
                        <button type="button" class="btn btn-link"  @click="openUpd(item)" >修改</button>
                        <button type="button" class="btn btn-link"  @click="execDel(item)" >删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>

    <div id="add-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>丢失人ID：</label>
                <input type="text" class="form-control" v-model="addData.lf_userid" >
            </div>

            <div class="form-group">
                <label>丢失物品名称：</label>
                <input type="text" class="form-control" v-model="addData.lf_name" >
            </div>

            <div class="form-group">
                <label>丢失物品种类：</label>
                <select class="custom-select" v-model="addData.lf_kind">
                    <option value="">请选择</option>
                    <option v-for="(label,value) in kindMap" :value="value">{{label}}</option>
                </select>
            </div>

            <div class="form-group">
                <label>丢失日期：</label>
                <input type="date" class="form-control" v-model="addData.lf_time" >
            </div>

            <div class="form-group">
                <label>丢失物品描述：</label>
                <textarea class="form-control" rows="3" v-model="addData.lf_desc"></textarea>
            </div>

            <button type="button" class="btn btn-primary"  @click="execAdd" >提交</button>
        </form>
    </div>

    <!-- 修改窗口 -->
    <div id="upd-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>丢失人ID：</label>
                <input type="text" class="form-control" v-model="updData.lf_userid" >
            </div>
            <div class="form-group">
                <label>丢失物品名称：</label>
                <input type="text" class="form-control" v-model="updData.lf_name" >
            </div>

            <div class="form-group">
                <label>丢失物品种类：</label>
                <select class="custom-select" v-model="updData.lf_kind">
                    <option value="">请选择</option>
                    <option v-for="(label,value) in kindMap" :value="value">{{label}}</option>
                </select>
            </div>

            <div class="form-group">
                <label>丢失日期：</label>
                <input type="date" class="form-control" v-model="updData.lf_time" >
            </div>

            <div class="form-group">
                <label>丢失物品描述：</label>
                <textarea class="form-control" rows="3" v-model="updData.lf_desc"></textarea>
            </div>

            <button type="button" class="btn btn-primary"  @click="execUpd" >提交</button>
        </form>
    </div>


</div>


<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/my-axios.js"></script>
<script src="../layer/layer.js"></script>

<script>


    const kindMap = {
        1: '电子产品',
        2: '衣物',
        3: '个人证件',
        4: '交通工具',
        5: '书本资料'
    };


    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {
                //查询条件
                query:{
                    pageNum:1,
                    pageSize:5,
                    lf_userid:'',
                    lf_name:'',
                    lf_kind:'',
                    lf_start_time:'',
                    lf_start_time:''
                },

                page:{},//分页对象

                kindMap, //此写法 等同 eduMap ：eduMap
                lostList: [],//列表数据
                addData:{//新增数据
                    lf_userid:'',
                    lf_name:'',
                    lf_kind:'',
                    lf_time:'',
                    lf_desc:''
                },
                addIdx:null,//新增窗口标识
                updIdx:null,//修改窗口标识
                updData:{//修改数据
                    lf_userid:'',
                    lf_name:'',
                    lf_kind:'',
                    lf_time:'',
                    lf_desc:''
                },

            };
        },

        //定义方法
        methods: {

            //分页跳转
            goPage(pageNum,pageSize){
                if(pageNum){
                    this.query.pageNum = pageNum;
                    if(pageSize){
                        this.query.pageSize = pageSize;
                    }
                }else{
                    this.query.pageNum = 1;
                }

                this.getLostList();
            },

            //获取数据
            getLostList(){
                const loadIdx = layer.load();
                myAxios.get('/lost/lostList',{params:this.query}).then((response) => {
                    layer.close(loadIdx);
                    //this.teaList = response.data.data;
                    this.page = response.data.data;
                    //this.page0 = response.data.data;
                    this.query.pageNum = this.page.current;//用服务端数据校正客户端数据参数
                    this.query.pageSize = this.page.pageSize;//用服务端数据校正客户端数据参数
                });
            },

            openPersonal(){
                this.addIdx = layer.open({
                    type: 1,
                    title:'查看个人丢失物品信息',
                    area: ['800px', '600px'],
                    content: $('#open-personal')
                });
            },
            //打开窗口
            openAdd(){
                this.addData = {
                    lf_userid:'',
                    lf_name:'',
                    lf_kind:'',
                    lf_time:'',
                    lf_desc:''
                };
                this.addIdx = layer.open({
                    type: 1,
                    title:'新增丢失物品信息',
                    area: ['800px', '600px'],
                    content: $('#add-win')
                });
            },
            //执行新增
            execAdd(){
                const idx = layer.load();
                myAxios.post('/lost/lostDoAdd',this.addData).then(response=>{
                    layer.close(idx);
                    if(response.data.success){
                        //this.getTeacherList();
                        this.goPage(this.page.last+1);
                        layer.close(this.addIdx);
                        layer.msg('新增丢失物品信息成功！',{icon:1});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('新增丢失物品信息失败！',{icon:2});                //layer.msg('新增教师信息失败！',{icon:2});
                });
            },
            //打开修改窗口的函数
            openUpd(item){
                this.updData = {...item};//js解构 ,在这里作用：产生一个item对象的副本
                this.updIdx = layer.open({
                    type: 1,
                    title: '修改丢失物品信息',                //title: '修改教师信息',
                    area: ['800px', '600px'],
                    content: $('#upd-win')
                });
            },
            //执行修改
            execUpd(){
                const idx = layer.load();
                myAxios.post('/lost/lostDoUpd',this.updData).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        //this.getTeacherList();
                        this.goPage(this.page.current);
                        layer.close(this.updIdx);
                        layer.msg('修改丢失物品信息成功！',{icon:1});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('修改丢失物品信息失败！',{icon:2});
                });
            },
            execDel(item){
                const idx = layer.load();
                myAxios.post('/lost/lostDoDel',item).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        //this.getTeacherList();
                        this.goPage(this.page.current);
                        layer.close(this.updIdx);
                        layer.msg('删除丢失物品信息成功！',{icon:1});
                    }else{
                        layer.msg(res.data.message,{icon:2});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('删除丢失物品信息失败！',{icon:2});
                });
            }
        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            //this.getTeacherList();
            this.goPage(1);
        }
    };

    Vue.createApp(app).mount('#app')

</script>


</body>
</html>